<template>
	<view class="container container326828">
		<view class="flex diygw-col-24 noticebar-clz">
			<diy-noticebar class="flex1 diy-notice-bar" color="#1b82ff" bgColor="#fff" leftIcon="diy-icon-notification">
				<block v-slot:content>
					<text class="diy-notice-item"> 欢迎使用水电表在线缴费充值系统，测试期间电费1元/度，水费3.5元/吨 </text>
				</block>
			</diy-noticebar>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-clz">
			<text class="diygw-col-12 text6-clz"> 可用额度： </text>
			<text class="diygw-col-12 text3-clz"> 125.04 </text>
			<view class="flex flex-wrap diygw-col-24 justify-between flex12-clz">
				<rich-text :nodes="text20" class="diygw-col-0 text20-clz text-cyan"></rich-text>
				<text class="diygw-col-0 text-clz text-blue"> （或已欠费，请尽快充值） </text>
			</view>
			<view class="flex diygw-col-24">
				<view class="diygw-pzx" style="border-bottom: 1px solid #eee"></view>
			</view>
			<view class="flex flex-wrap diygw-col-24 justify-between items-center flex1-clz">
				<text class="diygw-col-0 text1-clz"> 户号信息： </text>
				<text class="diygw-col-0 text2-clz"> 3202103013967 | A4-405 </text>
			</view>
			<view class="flex flex-wrap diygw-col-24 justify-between items-center flex3-clz">
				<text class="diygw-col-0 text7-clz"> 地址信息： </text>
				<text class="diygw-col-0 text8-clz"> 3街A405 </text>
			</view>
			<view class="flex flex-wrap diygw-col-24 justify-between items-center flex2-clz">
				<text class="diygw-col-0 text4-clz"> 缴费单位： </text>
				<text class="diygw-col-0 text5-clz"> 谢意璇 </text>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex4-clz">
			<text class="diygw-col-24 text9-clz"> 缴费金额 </text>
			<view class="flex flex-wrap diygw-col-8 justify-center items-center flex5-clz">
				<rich-text :nodes="text10" class="diygw-col-0 text10-clz"></rich-text>
			</view>
			<view class="flex flex-wrap diygw-col-8 justify-center items-center flex6-clz">
				<rich-text :nodes="text12" class="diygw-col-0 text12-clz"></rich-text>
			</view>
			<view class="flex flex-wrap diygw-col-8 justify-center items-center flex7-clz">
				<rich-text :nodes="text11" class="diygw-col-0 text11-clz"></rich-text>
			</view>
			<view class="flex flex-wrap diygw-col-8 justify-center items-center flex10-clz">
				<rich-text :nodes="text15" class="diygw-col-0 text15-clz"></rich-text>
			</view>
			<view class="flex flex-wrap diygw-col-8 justify-center items-center flex9-clz">
				<rich-text :nodes="text14" class="diygw-col-0 text14-clz"></rich-text>
			</view>
			<view class="flex flex-wrap diygw-col-8 justify-center items-center flex8-clz">
				<rich-text :nodes="text13" class="diygw-col-0 text13-clz"></rich-text>
			</view>
			<u-form-item labelWidth="auto" class="diygw-col-24 input-clz" label="￥" prop="input">
				<u-input :focus="inputFocus" placeholder="点击输入缴费金额" v-model="input" type="digit"></u-input>
			</u-form-item>
			<view class="flex diygw-col-24">
				<button class="diygw-btn blue md radius-xs flex-sub margin-lg button-button-clz">立即缴费</button>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column diygw-bottom flex13-clz">
			<text class="diygw-col-24 text16-clz"> 水电在线缴费充值 </text>
			<text class="diygw-col-24 text17-clz"> 淮安兴星佳科技有限公司 </text>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				text20: `<p><span style="text-decoration: underline;"><span style="color: #e03e2d; text-decoration: underline;">能耗详情</span></span></p>`,
				text10: `<p><span style="color: #ffffff;">50元</span></p>`,
				text12: `<p><span style="color: #000000;">100元</span></p>`,
				text11: `<p><span style="color: #000000;">200元</span></p>`,
				text15: `<p><span style="color: #000000;">500元</span></p>`,
				text14: `<p><span style="color: #000000;">1000元</span></p>`,
				text13: `<p><span style="color: #000000;">2000元</span></p>`,
				inputFocus: false,
				input: undefined
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {}
		}
	};
</script>

<style lang="scss" scoped>
	.noticebar-clz {
		background-color: #d4f1da;
	}
	.flex-clz {
		padding-top: 40rpx;
		border-bottom-left-radius: 12rpx;
		padding-left: 40rpx;
		padding-bottom: 20rpx;
		border-top-right-radius: 12rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
		box-shadow: 10rpx 10rpx 20rpx 2px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 0rpx;
		padding-right: 40rpx;
	}
	.text6-clz {
		font-size: 32rpx !important;
	}
	.text3-clz {
		font-size: 72rpx !important;
		text-align: right;
	}
	.flex12-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 0rpx) !important;
		margin-top: 60rpx;
		margin-bottom: 10rpx;
		margin-right: 0rpx;
	}
	.text20-clz {
		margin-left: 10rpx;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		text-align: right;
		margin-right: 0rpx;
	}
	.text-clz {
		margin-left: 10rpx;
		color: #1b82ff;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		text-align: right;
		margin-right: 0rpx;
	}
	.flex1-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text1-clz {
		font-size: 28rpx !important;
	}
	.text2-clz {
		font-size: 28rpx !important;
		text-align: right;
	}
	.flex3-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text7-clz {
		font-size: 28rpx !important;
	}
	.text8-clz {
		font-size: 28rpx !important;
		text-align: right;
	}
	.flex2-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text4-clz {
		font-size: 28rpx !important;
	}
	.text5-clz {
		font-size: 28rpx !important;
		text-align: right;
	}
	.flex4-clz {
		padding-top: 40rpx;
		border-bottom-left-radius: 12rpx;
		padding-left: 40rpx;
		padding-bottom: 20rpx;
		border-top-right-radius: 12rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
		box-shadow: 10rpx 10rpx 20rpx 2px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 20rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 20rpx;
		padding-right: 40rpx;
	}
	.text9-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		font-size: 32rpx !important;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		margin-right: 10rpx;
	}
	.flex5-clz {
		background-color: #1b82ff;
		margin-left: 10rpx;
		border-bottom-left-radius: 6rpx;
		overflow: hidden;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		border-top-left-radius: 6rpx;
		margin-top: 10rpx;
		border-top-right-radius: 6rpx;
		border-bottom-right-radius: 6rpx;
		margin-bottom: 10rpx;
		text-align: center;
		margin-right: 10rpx;
	}
	.text10-clz {
		margin-left: 10rpx;
		color: #ffffff;
		font-size: 32rpx !important;
		margin-top: 16rpx;
		margin-bottom: 16rpx;
		text-align: center;
		margin-right: 12rpx;
	}
	.flex6-clz {
		background-color: #f7f7f7;
		margin-left: 10rpx;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text12-clz {
		margin-left: 10rpx;
		color: #ffffff;
		font-size: 32rpx !important;
		margin-top: 16rpx;
		margin-bottom: 16rpx;
		text-align: center;
		margin-right: 12rpx;
	}
	.flex7-clz {
		background-color: #f7f7f7;
		margin-left: 10rpx;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text11-clz {
		margin-left: 10rpx;
		color: #ffffff;
		font-size: 32rpx !important;
		margin-top: 16rpx;
		margin-bottom: 16rpx;
		text-align: center;
		margin-right: 12rpx;
	}
	.flex10-clz {
		background-color: #f7f7f7;
		margin-left: 10rpx;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text15-clz {
		margin-left: 10rpx;
		color: #ffffff;
		font-size: 32rpx !important;
		margin-top: 16rpx;
		margin-bottom: 16rpx;
		text-align: center;
		margin-right: 12rpx;
	}
	.flex9-clz {
		background-color: #f7f7f7;
		margin-left: 10rpx;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text14-clz {
		margin-left: 10rpx;
		color: #ffffff;
		font-size: 32rpx !important;
		margin-top: 16rpx;
		margin-bottom: 16rpx;
		text-align: center;
		margin-right: 12rpx;
	}
	.flex8-clz {
		background-color: #f7f7f7;
		margin-left: 10rpx;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text13-clz {
		margin-left: 10rpx;
		color: #ffffff;
		font-size: 32rpx !important;
		margin-top: 16rpx;
		margin-bottom: 16rpx;
		text-align: center;
		margin-right: 12rpx;
	}
	.input-clz {
		margin-left: 0rpx;
		width: calc(100% - 0rpx - 10rpx) !important;
		font-size: 40rpx !important;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.button-button-clz {
		margin: 8rpx !important;
		padding: 40rpx !important;
	}
	.flex13-clz {
		margin-left: 10rpx;
		left: 0rpx;
		bottom: 0rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 80rpx;
		margin-right: 10rpx;
	}
	.text16-clz {
		color: #009dff;
		font-size: 36rpx !important;
		text-align: center;
	}
	.text17-clz {
		padding-top: 10rpx;
		color: #a3a3a3;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		text-align: center;
		padding-right: 10rpx;
	}
	.container326828 {
	}
</style>
